<div data-toggle="cubeui-tabs" id='eastTabs'>
    <div title="基础信息"
         data-options="id:'eastTab0',iconCls:'fa fa-info-circle'">
        <div style="margin: 0px;">
        </div>

        <form id='createNetworkForm1'>
            <div class="cubeui-fluid">
                <fieldset>
                    <legend>基础信息</legend>
                </fieldset>

                {{if updated}}
                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label">ID:</label>
                        <div class="cubeui-input-block">
                            <input type="text" data-toggle="cubeui-textbox" name="Name" readonly
                                   value='{{>ID}}'
                                   data-options="
                                            "
                            >
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label">NAME:</label>
                        <div class="cubeui-input-block">
                            <input type="text" data-toggle="cubeui-textbox" id="NetworkName" name="Name" readonly
                                   value='{{>Name}}'
                                   data-options="
                                            "
                            >
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label">Raft:</label>
                        <div class="cubeui-input-block">

                            <input type="text" data-toggle="cubeui-textbox" name="Driver" readonly
                                   value='{{>SVersion}}'
                                   data-options="
                                            "
                            >
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label">Driver:</label>
                        <div class="cubeui-input-block">

                            <input type="text" data-toggle="cubeui-textbox" name="CreateAt" readonly
                                   value='{{>Driver}}'
                                   data-options="
                                            "
                            >
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label">Scope:</label>
                        <div class="cubeui-input-block">

                            <input type="text" data-toggle="cubeui-textbox" name="CreateAt" readonly
                                   value='{{>Scope}}'
                                   data-options="
                                            "
                            >
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label" title="在网络上启用IPv6">EnableIPv6:</label>
                        <div class="cubeui-input-block">

                            <input type="text" data-toggle="cubeui-textbox" name="CreateAt" readonly
                                   value='{{>EnableIPv6Str}}'
                                   data-options="
                                            "
                            >
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label" title="限制对网络的外部访问">Internal:</label>
                        <div class="cubeui-input-block">

                            <input type="text" data-toggle="cubeui-textbox" name="CreateAt" readonly
                                   value='{{>InternalStr}}'
                                   data-options="
                                            "
                            >
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label" title="在swarm模式下，全局范围的网络可由工作人员的常规容器手动连接">Attachable:</label>
                        <div class="cubeui-input-block">

                            <input type="text" data-toggle="cubeui-textbox" name="CreateAt" readonly
                                   value='{{>AttachableStr}}'
                                   data-options="
                                            "
                            >
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label" title="入口网络是以swarm模式提供路由网格的网络">Ingress:</label>
                        <div class="cubeui-input-block">

                            <input type="text" data-toggle="cubeui-textbox" name="Ingress" readonly
                                   value='{{>IngressStr}}'
                                   data-options="
                                            "
                            >
                        </div>
                    </div>
                </div>

                {{else}}
                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label">NAME:</label>
                        <div class="cubeui-input-block">
                            <input type="text" data-toggle="cubeui-textbox" name="Name"
                                   value='{{>Name}}'
                                   data-options="
                                       prompt:'网络名称，必填项目',
                                       required:true,
                                            "
                            >
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label" title="要使用的网络驱动程序插件的名称。默认值：桥接">Driver:</label>
                        <div class="cubeui-input-block">
                            <input type="text" name="Driver" value='{{>Driver}}'
                                   data-toggle="cubeui-combobox"
                                   data-options="
                                            required:false,prompt:'为空，使用默认值：桥接',
                                            valueField:'KEY',
                                            textField:'TEXT',
                                            data:$.docker.driver.network.getNetworkObjectList()
                                   ">
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label" title="范围描述网络存在的级别（例如，集群范围的“swarm”或机器级别的“local”）">Scope:</label>
                        <div class="cubeui-input-block">
                            <input type="text" name="Scope" value='{{>Scope}}'
                                   data-toggle="cubeui-combobox"
                                   data-options="
                                            required:false,prompt:'为空，使用默认值：local',
                                            valueField:'KEY',
                                            textField:'TEXT',
                                            data:[{'KEY':'','TEXT':''},{'KEY':'local','TEXT':'local'},{'KEY':'swarm','TEXT':'swarm'},{'KEY':'global','TEXT':'global'}]
                                   ">
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label" title="检查名称重复的网络。由于网络主要基于随机ID而不是名称设置密钥，并且网络名称严格来说是使用ID唯一标识的网络的用户友好别名，因此无法保证检查重复项。CheckDuplicate提供了对具有相同名称但不能保证捕获所有名称冲突的任何网络的最大努力检查。">
                            检查名称重复:</label>
                        <div class="cubeui-input-block">
                            <input data-toggle="cubeui-switchbutton"
                                   {{if CheckDuplicate}}checked{{/if}}
                            name="CheckDuplicate" value="1" data-options="onText:'',offText:'',width:60">
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm3">
                        <label class="cubeui-form-label" title="在网络上启用IPv6">EnableIPv6:</label>
                        <div class="cubeui-input-block">
                            <input data-toggle="cubeui-switchbutton"
                                   {{if EnableIPv6}}checked{{/if}}
                            name="EnableIPv6" value="1" data-options="onText:'',offText:'',width:60">
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm3">
                        <label class="cubeui-form-label" title="限制对网络的外部访问">Internal:</label>
                        <div class="cubeui-input-block">
                            <input data-toggle="cubeui-switchbutton"
                                   {{if Internal}}checked{{/if}}
                            name="Internal" value="1" data-options="onText:'',offText:'',width:60">
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm3">
                        <label class="cubeui-form-label" title="在swarm模式下，全局范围的网络可由工作人员的常规容器手动连接">Attachable:</label>
                        <div class="cubeui-input-block">
                            <input data-toggle="cubeui-switchbutton"
                                   {{if Attachable}}checked{{/if}}
                            name="Attachable" value="1" data-options="onText:'',offText:'',width:60">
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm3">
                        <label class="cubeui-form-label" title="入口网络是以swarm模式提供路由网格的网络">Ingress:</label>
                        <div class="cubeui-input-block">
                            <input data-toggle="cubeui-switchbutton"
                                   {{if Ingress}}checked{{/if}}
                            name="Ingress" value="1" data-options="onText:'',offText:'',width:60">
                        </div>
                    </div>
                </div>

                {{/if}}


                <fieldset  style="margin-top: 10px;">
                    <legend style="margin-bottom: 0px;">驱动选项</legend>
                </fieldset>
                {{if updated}}
                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <div class="cubeui-row"  style="margin-top: 0px;">
                            <div class="cubeui-col-sm5 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <span style='line-height: 20px;padding-right:0px;'>标签</span>
                            </div>
                            <div class="cubeui-col-sm1">
                                <span style='line-height: 20px;padding-right:0px;'>&nbsp;</span>
                            </div>
                            <div class="cubeui-col-sm5" >
                                <span style='line-height: 20px;padding-right:0px;'>值</span>
                            </div>
                        </div>
                        {{if Options}}
                        {{props Options}}
                        <div class="cubeui-row">
                            <div class="cubeui-col-sm5 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <span style='line-height: 20px;padding-right:0px;'>{{>key}}</span>

                            </div>
                            <div class="cubeui-col-sm1">
                                <span style='line-height: 20px;padding-right:0px;'>=</span>
                            </div>
                            <div class="cubeui-col-sm5">
                                <span style='line-height: 20px;padding-right:0px;'>{{>prop}}</span>
                            </div>
                        </div>
                        {{/props}}
                        {{/if}}
                    </div>
                </div>
                {{else}}
                <div class="cubeui-row">
                    <div class="cubeui-col-sm12 add-opt-div">
                        <div class="cubeui-row">
                            <div class="cubeui-col-sm4 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <span style='line-height: 20px;padding-right:0px;'>键</span>
                            </div>
                            <div class="cubeui-col-sm5" >
                                <span style='line-height: 20px;padding-right:0px;'>值</span>
                            </div>
                            <div class="cubeui-col-sm2" style="text-align: center">
                                    <span style='line-height: 20px;padding-right:0px;'>
                                        <span onClick="$.docker.utils.ui.addNodeOpts(this, 'driver-opt')"  class="ops-fa-icon fa fa-plus" style="font-size:14px!important;">&nbsp;</span>
                                    </span>
                            </div>
                        </div>

                        {{if Options}}
                        {{props Options}}
                        <div class="cubeui-row">
                            <div class="cubeui-col-sm4 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <input type="text" data-toggle="cubeui-textbox" value="{{>key}}"
                                       name='driver-opt-name' data-options="required:false,prompt:'名字，比如：group '">
                            </div>
                            <div class="cubeui-col-sm5">
                                <input type="text" data-toggle="cubeui-textbox" value="{{>prop}}"
                                       name='driver-opt-value' data-options="required:false,prompt:'对应值，比如：db '">
                            </div>
                            <div class="cubeui-col-sm2" style="text-align: center">
                                <span style='line-height: 30px;padding-right:0px;'><span onClick="$.docker.utils.ui.removeOpt(this)"  class="ops-fa-icon fa fa-close" style="font-size:14px!important;">&nbsp;</span></span>
                            </div>
                        </div>
                        {{/props}}
                        {{/if}}

                    </div>
                </div>
                {{/if}}

                <fieldset  style="margin-top: 20px;">
                    <legend style="margin-bottom: 0px;">标签选项</legend>
                </fieldset>

                {{if updated}}
                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <div class="cubeui-row"  style="margin-top: 0px;">
                            <div class="cubeui-col-sm5 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <span style='line-height: 20px;padding-right:0px;'>标签</span>
                            </div>
                            <div class="cubeui-col-sm1">
                                <span style='line-height: 20px;padding-right:0px;'>&nbsp;</span>
                            </div>
                            <div class="cubeui-col-sm5" >
                                <span style='line-height: 20px;padding-right:0px;'>值</span>
                            </div>
                        </div>
                        {{if Labels}}
                        {{props Labels}}
                        <div class="cubeui-row">
                            <div class="cubeui-col-sm5 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <span style='line-height: 20px;padding-right:0px;'>{{>key}}</span>

                            </div>
                            <div class="cubeui-col-sm1">
                                <span style='line-height: 20px;padding-right:0px;'>=</span>
                            </div>
                            <div class="cubeui-col-sm5">
                                <span style='line-height: 20px;padding-right:0px;'>{{>prop}}</span>
                            </div>
                        </div>
                        {{/props}}
                        {{/if}}
                    </div>
                </div>
                {{else}}
                <div class="cubeui-row">
                    <div class="cubeui-col-sm12 add-opt-div">
                        <div class="cubeui-row">
                            <div class="cubeui-col-sm4 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <span style='line-height: 20px;padding-right:0px;'>键</span>
                            </div>
                            <div class="cubeui-col-sm5" >
                                <span style='line-height: 20px;padding-right:0px;'>值</span>
                            </div>
                            <div class="cubeui-col-sm2" style="text-align: center">
                                    <span style='line-height: 20px;padding-right:0px;'>
                                        <span onClick="$.docker.utils.ui.addNodeOpts(this, 'Labels')"  class="ops-fa-icon fa fa-plus" style="font-size:14px!important;">&nbsp;</span>
                                    </span>
                            </div>
                        </div>

                        {{if Labels}}
                        {{props Labels}}
                        <div class="cubeui-row">
                            <div class="cubeui-col-sm4 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <input type="text" data-toggle="cubeui-textbox" value="{{>key}}"
                                       name='Labels-name' data-options="required:false,prompt:'名字，比如：group '">
                            </div>
                            <div class="cubeui-col-sm5">
                                <input type="text" data-toggle="cubeui-textbox" value="{{>prop}}"
                                       name='Labels-value' data-options="required:false,prompt:'对应值，比如：db '">
                            </div>
                            <div class="cubeui-col-sm2" style="text-align: center">
                                <span style='line-height: 30px;padding-right:0px;'><span onClick="$.docker.utils.ui.removeOpt(this)"  class="ops-fa-icon fa fa-close" style="font-size:14px!important;">&nbsp;</span></span>
                            </div>
                        </div>
                        {{/props}}
                        {{/if}}

                    </div>
                </div>
                {{/if}}
            </div>
        </form>
    </div>


    <div title="IPAM设置"
         data-options="id:'eastTab1',iconCls:'fa fa-usb'">
        <div style="margin: 0px;">
        </div>
        <form id='createNetworkForm2'>
            <div class="cubeui-fluid">


                {{if updated}}

                <fieldset>
                    <legend>IPAM设置</legend>
                </fieldset>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label">ID:</label>
                        <div class="cubeui-input-block">
                            <input type="text" data-toggle="cubeui-textbox" name="Name" readonly
                                   value='{{>ID}}'
                                   data-options="
                                            "
                            >
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label">NAME:</label>
                        <div class="cubeui-input-block">
                            <input type="text" data-toggle="cubeui-textbox" id="ConfigName" name="Name" readonly
                                   value='{{>Name}}'
                                   data-options="
                                            "
                            >
                        </div>
                    </div>
                </div>

                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <label class="cubeui-form-label">Driver:</label>
                        <div class="cubeui-input-block">

                            <input type="text" data-toggle="cubeui-textbox" name="Driver" readonly
                                   value='{{>IPAM.Driver}}'
                                   data-options="
                                            "
                            >
                        </div>
                    </div>
                </div>
                {{/if}}


                <fieldset  style="margin-top: 10px;">
                    <legend style="margin-bottom: 0px;">IPAM参数选项</legend>
                </fieldset>

                {{if updated}}
                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <div class="cubeui-row"  style="margin-top: 0px;">
                            <div class="cubeui-col-sm5 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <span style='line-height: 20px;padding-right:0px;'>标签</span>
                            </div>
                            <div class="cubeui-col-sm1">
                                <span style='line-height: 20px;padding-right:0px;'>&nbsp;</span>
                            </div>
                            <div class="cubeui-col-sm5" >
                                <span style='line-height: 20px;padding-right:0px;'>值</span>
                            </div>
                        </div>
                        {{if IPAM.Options}}
                        {{props IPAM.Options}}
                        <div class="cubeui-row">
                            <div class="cubeui-col-sm5 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <span style='line-height: 20px;padding-right:0px;'>{{>key}}</span>

                            </div>
                            <div class="cubeui-col-sm1">
                                <span style='line-height: 20px;padding-right:0px;'>=</span>
                            </div>
                            <div class="cubeui-col-sm5">
                                <span style='line-height: 20px;padding-right:0px;'>{{>prop}}</span>
                            </div>
                        </div>
                        {{/props}}
                        {{/if}}
                    </div>
                </div>
                {{else}}
                <div class="cubeui-row">
                    <div class="cubeui-col-sm12 add-opt-div">
                        <div class="cubeui-row">
                            <div class="cubeui-col-sm4 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <span style='line-height: 20px;padding-right:0px;'>键</span>
                            </div>
                            <div class="cubeui-col-sm5" >
                                <span style='line-height: 20px;padding-right:0px;'>值</span>
                            </div>
                            <div class="cubeui-col-sm2" style="text-align: center">
                                    <span style='line-height: 20px;padding-right:0px;'>
                                        <span onClick="$.docker.utils.ui.addNodeOpts(this, 'ipam-opt')"  class="ops-fa-icon fa fa-plus" style="font-size:14px!important;">&nbsp;</span>
                                    </span>
                            </div>
                        </div>

                        {{if IPAM.Options}}
                        {{props IPAM.Options}}
                        <div class="cubeui-row">
                            <div class="cubeui-col-sm4 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <input type="text" data-toggle="cubeui-textbox" value="{{>key}}"
                                       name='ipam-opt-name' data-options="required:false,prompt:'名字，比如：group '">
                            </div>
                            <div class="cubeui-col-sm5">
                                <input type="text" data-toggle="cubeui-textbox" value="{{>prop}}"
                                       name='ipam-opt-value' data-options="required:false,prompt:'对应值，比如：db '">
                            </div>
                            <div class="cubeui-col-sm2" style="text-align: center">
                                <span style='line-height: 30px;padding-right:0px;'><span onClick="$.docker.utils.ui.removeOpt(this)"  class="ops-fa-icon fa fa-close" style="font-size:14px!important;">&nbsp;</span></span>
                            </div>
                        </div>
                        {{/props}}
                        {{/if}}

                    </div>
                </div>
                {{/if}}


                <fieldset  style="margin-top: 20px;">
                    <legend style="margin-bottom: 0px;">网络设置</legend>
                </fieldset>

                {{if updated}}
                <div class="cubeui-row">
                    <div class="cubeui-col-sm12">
                        <div class="cubeui-row"  style="margin-top: 0px;">
                            <div class="cubeui-col-sm5 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <span style='line-height: 20px;padding-right:0px;'>Subnet</span>
                            </div>
                            <div class="cubeui-col-sm1">
                                <span style='line-height: 20px;padding-right:0px;'>&nbsp;</span>
                            </div>
                            <div class="cubeui-col-sm5" >
                                <span style='line-height: 20px;padding-right:0px;'>Gateway</span>
                            </div>
                        </div>
                        {{if IPAM.Config}}
                        {{for IPAM.Config}}
                        <div class="cubeui-row">
                            <div class="cubeui-col-sm5 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <span style='line-height: 20px;padding-right:0px;'>{{>Subnet}}</span>

                            </div>
                            <div class="cubeui-col-sm1">
                                <span style='line-height: 20px;padding-right:0px;'>&nbsp;</span>
                            </div>
                            <div class="cubeui-col-sm5">
                                <span style='line-height: 20px;padding-right:0px;'>{{>Gateway}}</span>
                            </div>
                        </div>
                        {{/for}}
                        {{/if}}
                    </div>
                </div>
                {{else}}
                <div class="cubeui-row">
                    <div class="cubeui-col-sm12 add-opt-div">
                        <div class="cubeui-row">
                            <div class="cubeui-col-sm4 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <span style='line-height: 20px;padding-right:0px;'>Subnet</span>
                            </div>
                            <div class="cubeui-col-sm5" >
                                <span style='line-height: 20px;padding-right:0px;'>Gateway</span>
                            </div>
                            <div class="cubeui-col-sm2" style="text-align: center">
                                    <span style='line-height: 20px;padding-right:0px;'>
                                        <span onClick="$.docker.utils.ui.addNetwork(this, 'network')"  class="ops-fa-icon fa fa-plus" style="font-size:14px!important;">&nbsp;</span>
                                    </span>
                            </div>
                        </div>

                        {{if IPAM.Config}}
                        {{for IPAM.Config}}
                        <div class="cubeui-row">
                            <div class="cubeui-col-sm4 cubeui-col-sm-offset1" style="padding-right: 5px">
                                <input type="text" data-toggle="cubeui-textbox" value="{{>Subnet}}"
                                       name='network-name' data-options="required:false,prompt:'Subnet，比如：172.17.0.0/16 '">
                            </div>
                            <div class="cubeui-col-sm5">
                                <input type="text" data-toggle="cubeui-textbox" value="{{>Gateway}}"
                                       name='network-value' data-options="required:false,prompt:'Gateway，比如：172.17.0.1  '">
                            </div>
                            <div class="cubeui-col-sm2" style="text-align: center">
                                <span style='line-height: 30px;padding-right:0px;'><span onClick="$.docker.utils.ui.removeOpt(this)"  class="ops-fa-icon fa fa-close" style="font-size:14px!important;">&nbsp;</span></span>
                            </div>
                        </div>
                        {{/for}}
                        {{/if}}

                    </div>
                </div>
                {{/if}}
            </div>
        </form>

    </div>

    {{if updated}}
    <div title="活动容器"
         data-options="id:'eastTab1',iconCls:'fa fa-superpowers'">
        <div style="margin: 0px;">
        </div>

        <div id="relatedContainersDg-toolbar" class="cubeui-toolbar"
             data-options="grid:{
                           type:'datagrid',
                           id:'relatedContainersDg'
                       }">

            <a  href="javascript:void(0)" data-toggle='cubeui-menubutton' data-options="{
                            onClick:function(){
                                refreshConnectedContainers();
                            },
                            extend: '#relatedContainersDg-toolbar',
                            btnCls: 'cubeui-btn-orange',
                            iconCls: 'fa fa-refresh'
                        }">刷新</a>

            <a  href="javascript:void(0)" data-toggle='cubeui-menubutton' data-options="{
                            onClick:function(){
                                connectContainerDlg('{{>ID}}');
                            },
                            extend: '#relatedContainersDg-toolbar',
                            btnCls: 'cubeui-btn-blue',
                            iconCls: 'fa fa-link'
                        }">连接容器</a>
        </div>
        <!-- 表格工具栏结束 -->

        <table id="relatedContainersDg"></table>

    </div>
    {{/if}}

</div>